<template>
	<view class="recharge-page">
		<!-- 固定选项卡 -->
		<view class="tabs">
			<view class="tab-item" :class="{ active: currentTab === 0 }" @click="switchTab(0)">
				预存款
			</view>
			<view class="tab-item" :class="{ active: currentTab === 1 }" @click="switchTab(1)">
				游戏币
			</view>
			<view class="tab-item" :class="{ active: currentTab === 2 }" @click="switchTab(2)">
				游乐币
			</view>
		</view>

		<!-- 充值金额列表 -->
		<scroll-view class="amount-list" scroll-y="true">
			<view class="amount-item" v-for="(item, index) in amountList" :key="index" @click="selectAmount(item)">
				<!-- 套餐图片 -->
				<view class="package-image">
					<image :src="'/static/play-coin.png'" mode="aspectFit"></image>
				</view>
				<!-- 套餐信息 -->
				<view class="package-info">
					<view class="package-name">{{ item.packageName || '优惠套餐' }}</view>
					<view class="price">
						<text class="current-price">¥{{ item.salePrice }}</text>
						<text class="original-price" v-if="item.originalPrice > item.salePrice">¥{{ item.originalPrice }}</text>
					</view>
				</view>
				<!-- 选中图标 -->
				<view class="select-icon" v-if="selectedAmount === item.salePrice">
					<text class="iconfont icon-check"></text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTab: 0, // 默认选中预存款
				loading: false, // 加载状态
				amountLists: [
					[], // 预存款数据
					[], // 游戏币数据
					[]  // 游乐币数据
				],
				tabTypes: [1, 2, 3] // 预存款=1, 游戏币=2, 游乐币=3
			};
		},
		computed: {
			// 根据当前选项卡返回对应的金额列表
			amountList() {
				return this.amountLists[this.currentTab];
			}
		},
		// 页面加载时获取数据
		onLoad() {
			uni.setNavigationBarTitle({
				title: this.$t('recharge.str1')
			});
			this.loadCoinPackageData();
		},
		// 页面显示时获取数据（确保每次显示都有最新数据）
		onShow() {
			this.loadCoinPackageData();
		},
		mounted() {
			uni.setNavigationBarTitle({
				title: this.$t('title.rechargeList')
			});
		},
		methods: {
			// 切换选项卡
			switchTab(index) {
				this.currentTab = index;
				console.log("switchTab",index);
				// 加载对应类型的数据
				this.loadCoinPackageData();
			},

			// 选择充值金额
			selectAmount(item) {
				uni.navigateTo({
					url: `/pages/recharge/recharge-order?coinPackageNo=${item.coinPackageNo}&packageType=${item.packageType}`
				});
			},

			// 加载币包数据
			async loadCoinPackageData() {
				return; //todo 临时拦截
				// 如果当前类型的数据已经加载过，不再重复加载
				if (this.amountLists[this.currentTab].length > 0 && !this.loading) {
					return;
				}

				this.loading = true;
				const packageType = this.tabTypes[this.currentTab];
				try {
					const data = { packageType };
					const result = await this.$http.post('/coinPackage/getCoinPackageVOList', data, {
						showLoading: true,
					});

					console.log(`加载${packageType === 1 ? '预存款' : packageType === 2 ? '游戏币' : '游乐币'}数据:`, result);

					// 处理接口返回的数据，适配到页面的展示结构
					if (result && Array.isArray(result)) {
						// 将接口返回的格式转换为页面所需的格式
						// 直接使用接口返回的字段
						this.amountLists[this.currentTab] = result.slice().sort((a, b) => a.salePrice - b.salePrice); // 按金额升序排列

						// 设置默认选中第一个金额
						if (this.amountLists[this.currentTab].length > 0) {
							this.selectedAmount = this.amountLists[this.currentTab][0].salePrice;
						}
					} else {
						this.amountLists[this.currentTab] = [];
					}
				} catch (error) {
					console.error('加载币包数据失败:', error);
					this.amountLists[this.currentTab] = [];
					const errorMsg = error.message || '加载数据失败，请重试';
					uni.showToast({
						title: errorMsg,
						icon: 'none',
						duration: 3000
					});
				} finally {
					this.loading = false;
				}
			},

			// 返回上一页
			navigateBack() {
				uni.navigateBack({
					delta: 1
				});
			},

			// 根据套餐类型获取对应的图片
			getPackageImage(packageType) {
				// 根据套餐类型返回不同的图片
				switch(packageType) {
					case 1:
						return '/static/yucunkuan.png'; // 预存款图片
					case 2:
						return '/static/youxibi.png'; // 游戏币图片
					case 3:
						return '/static/youlebi.png'; // 游乐币图片
					default:
						return '/static/recharge.png'; // 默认图片
				}
			}
		}
	};
</script>

<style scoped>
	.recharge-page {
		display: flex;
		flex-direction: column;
		min-height: 100%;
		background-color: #f5f5f5;
	}

	.empty {
		width: 44px;
		height: 44px;
	}

	/* 选项卡样式 */
	.tabs {
		display: flex;
		height: 48px;
		background-color: #ffffff;
		border-bottom: 1px solid #eee;
	}

	.tab-item {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 16px;
		color: #666;
		position: relative;
	}

	.tab-item.active {
		color: #ff4d4f;
		font-weight: 500;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 40px;
		height: 2px;
		background-color: #ff4d4f;
	}

	/* 金额列表样式 */
	.amount-list {
		flex: 1;
		padding: 16px;
		box-sizing: border-box;
	}

	.amount-item {
		display: flex;
		align-items: center;
		background-color: #ffffff;
		border-radius: 12px;
		padding: 16px;
		margin-bottom: 16px;
		border: 1px solid #eee;
		position: relative;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
		transition: all 0.3s ease;
	}

	.amount-item:active {
		background-color: #f9f9f9;
		transform: translateY(1px);
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
	}

	/* 套餐图片样式 */
	.package-image {
		width: 60px;
		height: 60px;
		margin-right: 16px;
		background-color: #f8f8f8;
		border-radius: 8px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.package-image image {
		width: 40px;
		height: 40px;
	}

	/* 套餐信息样式 */
	.package-info {
		flex: 1;
	}

	.package-name {
		font-size: 15px;
		color: #333;
		font-weight: 500;
		margin-bottom: 4px;
	}

	.amount {
		font-size: 16px;
		color: #333;
		font-weight: 600;
		margin-bottom: 4px;
	}

	.price {
		display: flex;
		align-items: baseline;
	}

	.current-price {
		font-size: 18px;
		color: #ff4d4f;
		font-weight: 600;
	}

	.original-price {
		font-size: 14px;
		color: #999;
		text-decoration: line-through;
		margin-left: 8px;
	}

	.select-icon {
		position: absolute;
		right: 16px;
		top: 50%;
		transform: translateY(-50%);
		color: #ff4d4f;
		font-size: 20px;
	}
</style>